<template>
	<view class="index">
		<nav-bars backState="1000" bgColor="#fff" fontColor="#000" title="素材详情"></nav-bars>
		<view class="s_detail">
			<view class="s_title">{{ info.title }}</view>
			<view class="">
				<text>{{ info.tag }}</text>
			</view>
			<view class="c_tit">
				<text>作者:{{ info.author }}</text>
				<text style="float: right;">阅读:{{ info.pv }}</text>
			</view>
			<!-- 音频 -->
			<view class="playvideo" v-if="info.category_id == 1">
				<video style="width: 100%;height: 100rpx;" id="myVideo" :autoplay="true" :src="info.category_txt.path" controls></video>
			</view>
			<!-- 视频 -->
			<view class="playvideo" v-if="info.category_id == 2"><video style="width: 100%;" id="myVideo" :autoplay="true" :src="info.category_txt.path" controls></video></view>
			<view><u-parse :html="info.content"></u-parse></view>
			<view class="c_tits">
				<text>发布时间:{{ info.ctime }}</text>
			</view>
			<!-- <view class="img-km"><image src="https://cos.ryz1620.com/liankun/static/df1.gif" mode="widthFix"></image></view> -->
		</view>
		<!-- <view class="topsx">相关推荐</view>
		<view class="list" v-for="(items, indexs) in infolist" :key="indexs" v-if="items.id != 1">
			<view class="i_cont" @click="gitdetail(items.id)">
				<view class="i_img"><image :src="items.cover"></image></view>
				<view class="i_bOper">
					<view class="i_tit">{{ items.title }}</view>
					<view class="i_tits">{{ items.brief }}</view>
					<view class="i_time">
						{{ items.ctime }}
						<text>阅读:{{ items.pv }}</text>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 评论 -->
		<!-- <view class="d_evaluate">
			<view class="d_eTitle">评论<text>({{commentList.length}})</text></view>
			<view class="d_eList">
				<view v-for="(comment,index) in commentList" :key="index">
					<view class="d_eItem">
						<view class="d_eHead" v-if="comment.user_id.avatar.path">
							<image :src="comment.user_id.avatar.path"></image>
						</view>
						<view class="d_eHead" v-else>
							<image src="https://manager.ryz1620.com/static/my/avator.png"></image>
						</view>
						<view class="d_eCont">
							<view @tap="dync_commentSelectReply(comment.id, comment.user_id.username)">
								<view class="d_eName">{{comment.user_id.username}}
								</view>
								<view class="d_eTxt">{{comment.content}}</view>
								<view class="d_eTxt">
									<view class="d_eTip" style="padding-left: 0;">{{comment.createTime}}</view>
									<view class="d_eTip" @tap.top="getcommentdel(comment.id)"
										v-if="comment.user_id.id == useid">删除</view>
									<view class="d_eTip" v-else style="color: #333;">回复</view>
								</view>
							</view>
							<view class="d_eIts">
								<view v-for="(reply,indes) in comment.sub_reply" :key="indes">
									<view class="d_eiItem"
										@tap="dync_commentSelectReply(reply.id, reply.user_id.username)">
										<view class="d_eiHead" v-if="reply.user_id.avatar.path">
											<image :src="reply.user_id.avatar.path"></image>
										</view>
										<view class="d_eiHead" v-else>
											<image src="https://manager.ryz1620.com/static/my/avator.png"></image>
										</view>
										<view class="d_eiCont">
											<view class="d_eiName">{{reply.user_id.username}}</view>
											<view class="d_eiTxt">
												<view v-if="reply.isReplay" style="color: #666; font-size: 20rpx;">
													回复<text class="d_eiReply">{{reply.reply_id.username}}</text>：
												</view>
												{{reply.content}}
											</view>
											<view class="d_eiTxt">
												<view class="d_eiTip">{{reply.createTime}}</view>
												<view class="d_eiTip" @tap.top="getcommentdel(reply.id)"
													v-if="reply.user_id.id == useid">删除</view>
												<view class="d_eiTip" v-else style="color: #333;">回复</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- 评论框 -->
		<!-- <view class="d_talk">
			<view class="d_tShim"></view>
			<view class="d_tBox">
				<view class="d_tFuns">
					<view class="d_tFun" @click="is_show_model=true">
						<view class="d_tIcon iconfont icon-transpond"></view>
						<view class="d_tTxt">转发</view>
					</view>
					<view class="d_tFun" @click="trendStore(info)">
						<view class="d_tIcon" v-if="info.support_status == 1">
							<image src="/static/common/icon_collection.png"></image>
						</view>
						<view class="d_tIcon" v-else>
							<image src="/static/common/icon_collection2.png"></image>
						</view>
						<view class="d_tTxt">{{info.support_num}}</view>
					</view>
				</view>
				<view class="d_tInput" v-if="!commentReplyName"><input type="text" placeholder-class="placeholder"
						:focus="commentFocus" v-model="content"
						:placeholder="commentReplyName ? '回复 @' + commentReplyName + ':' : '评论一下吧~'"
						@confirm="dync_comment" @input="inputKey($event, 'comment')" />
				</view>
				<view class="d_tInput" v-else>
					<input type="text" placeholder-class="placeholder" :focus="commentFocus" v-model="content"
						:placeholder="commentReplyName ? '回复 @' + commentReplyName + ':' : '评论一下吧~'"
						@confirm="dync_commentReply" @input="inputKey($event, 'comment')" />
				</view>
			</view>
		</view> -->
		<view class="d_talk">
			<view class="d_tShim"></view>
			<view class="d_tBox" style=""><view @click="is_show_model = true" class="Btn" style="">分享</view></view>
		</view>

		<!--模态弹窗-->
		<view class="cu-modal bottom-modal" :class="[is_show_model ? 'show' : '']" @click.stop="is_show_model = false">
			<view class="cu-dialog bottom-md" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;" @click.stop="">
				<view class="md-content">
					<view class="md-content-item">
						<view class="s_bIcon iconfont icon-friend"></view>
						<view>分享给好友</view>
						<!-- #ifdef MP-WEIXIN -->
						<button open-type="share" @click="is_show_model = false" class="sharebtn"></button>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<button @click="actionsheettip" class="sharebtn"></button>
						<!-- #endif -->
					</view>
					<view class="md-content-item" @click="popShareToPicture">
						<view class="s_bIcon s_bIcons iconfont icon-picture"></view>
						<view>生成分享大图</view>
					</view>
				</view>
				<view class="cancel" @click="is_show_model = false">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
import navBar from '@/components/navBar/navBar.vue';
import service_now from '@/service/now.js';
import service_mall from '@/service/mall.js';
import API from '@/service/material.js';
import URL from '@/config/url.js';

export default {
	components: { navBar },

	data() {
		return {
			id: '',
			info: {},
			infolist: [],
			userId: '',
			popShare: false, // 弹窗-分享
			// 评论
			// 评论
			commentPage: 0,
			commentTime: 0,
			commentList: [],
			comment: '',
			replyId: null,
			content: '',
			useid: '',
			commentIsReply: false,
			commentLoading: false,
			commentReplyId: '',
			commentReplyName: '',
			is_show_model: false, //是否显示分享模态窗
			commentFocus: false
		};
	},
	onLoad(params) {
		this.$utils.getUrl()
		this.id = params.id;
		this.getdata(params.id);
		this.userId = uni.getStorageSync('userId');
		let token = uni.getStorageSync('token');
		if (params.share_uid) {
			let shareuId = params.share_uid;
			this.$store.commit('index/SET_shareuId', shareuId);
			if (token && shareuId) {
				service_mall.getPromoter({ share_uid: shareuId }).then(res => {});
			}
		}
	},
	onShareAppMessage(res) {
		// let that = this
		if (res.from === 'button') {
		}
		this.getgetforwards();
		return {
			title: this.info.title,
			path: '/pages_now/pages/material/details??id=' + this.id,
			success: function(res) {
				// that.getgetforwards()
			}
		};
	},
	methods: {
		// 获取详情
		getdata(id) {
			let params = {
				id: id
			};
			API.getDetaile(params).then(res => {
				if (res.code == 1) {
					this.info = res.data.article;
					this.infolist = res.data.recommend;
					this.getpv();
				}
			});
		},

		gitdetail(id) {
			uni.navigateTo({
				url: '/pages_now/pages/now/article/detail?id=' + id
			});
		},
		// 阅读记录
		getpv() {
			let params = {
				article_id: this.id
			};
			service_now.getpv(params).then(res => {
				if (res.code == 1) {
				}
			});
		},
		// 转发
		getgetforwards() {
			service_now
				.getforward({
					article_id: this.id
				})
				.then(res => {});
		},
		// 关闭弹窗
		popShareClose() {
			this.popShare = false;
		},
		// 跳转-海报页面
		popShareToPicture() {
			uni.navigateTo({
				url: '/pages_now/pages/material/share?id=' + this.id
			});
		},
		
		// app分享
		actionsheettip() {
			let title = this.info.title;
			let imageUrl = this.info.cover;
			let path = '/pages_now/pages/material/share?id=' + this.id + '&share_uid=' + this.userId;
			let that = this;
			uni.downloadFile({
				url: imageUrl,
				success: res => {
					if (res.statusCode === 200) {
						uni.compressImage({
							src: res.tempFilePath,
							quality: 30,
							success: ress => {
								var tempFilePath = ress.tempFilePath;
								that.$common.appShare(title, tempFilePath, path, result => {
									if (result == 'success') {
										// 	分享成功
									}
								});
							}
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.index {
	width: 100vw;
	min-height: 100vh;
	background: #fff;
	display: flex;
	flex-flow: column;
}
.articelist {
	padding: 0 30rpx;
	border-bottom: 15rpx #f5f5f5 solid;
}
.tabtop {
	line-height: 90rpx;
	font-size: 32rpx;
	.i_more {
		font-size: 28rpx;
		float: right;
		color: #999;
	}
}
.i_cont {
	height: 240rpx;
	padding: 20rpx;
	padding-left: 220rpx;
	position: relative;
	.i_img {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		top: 20rpx;
		left: 0;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.i_tit {
		font-size: 30rpx;
		height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 10rpx;
	}
	.i_tits {
		font-size: 26rpx;
		height: 68rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 10rpx;
		color: #999;
	}
	.i_time {
		font-size: 26rpx;
		color: #999;
	}
}
.s_detail {
	padding: 32rpx;
}
.c_tits {
	font-size: 28rpx;
	color: #999;
	line-height: 80rpx;
}
.s_title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}
.c_tit {
	line-height: 80rpx;
	border-bottom: 1px #f1f1f1 solid;
	margin-bottom: 30rpx;
	color: #888;
}
.list {
	padding: 0 30rpx;
}
.i_cont {
	height: 240rpx;
	padding: 20rpx;
	padding-left: 220rpx;
	position: relative;
	.i_img {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		top: 20rpx;
		left: 0;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.i_tit {
		font-size: 30rpx;
		height: 80rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 10rpx;
	}
	.i_tits {
		font-size: 26rpx;
		height: 68rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 10rpx;
		color: #999;
	}
	.i_time {
		font-size: 26rpx;
		color: #999;
		text {
			float: right;
		}
	}
}
.img-km {
	margin: 30rpx 0;
}
.topsx {
	padding: 20rpx;
	font-size: 32rpx;
	font-weight: bold;
}
// 评论=====
.d_evaluate {
	padding: 40rpx 0;
	background: #fff;

	.d_eTitle {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 36rpx;
		font-weight: bold;
		padding-left: 36rpx;

		& > text {
			font-size: 24rpx;
			font-weight: bold;
			padding-left: 8rpx;
		}
	}

	.d_eList {
		padding-left: 32rpx;
	}

	.d_eItem {
		margin-top: 30rpx;

		&:nth-last-child(1) .p_eCont::after {
			content: none;
		}
	}

	.d_eHead,
	.d_eIts .d_eiHead {
		width: 66rpx;
		height: 66rpx;
		margin-right: 16rpx;
		border-radius: 50%;
		background: #f0f0f0;
		float: left;
	}

	.d_eCont {
		padding-bottom: 28rpx;
		position: relative;
		overflow: hidden;

		&::after {
			content: '';
			width: 100%;
			height: 1px;
			background: #f4f4f4;
			position: absolute;
			bottom: 0;
			left: 0;
			transform: scaleY(0.5);
		}
	}

	.d_eName,
	.d_eIts .d_eiName {
		height: 28rpx;
		line-height: 28rpx;
		color: #939393;
		font-size: 20rpx;
	}

	.d_eAuth,
	.d_eIts .d_eiAuth {
		width: 64rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		color: #333;
		font-size: 20rpx;
		margin-left: 8rpx;
		border-radius: 28rpx;
		background: #f6f7fb;
		display: inline-block;
	}

	.d_eTxt,
	.d_eIts .d_eiTxt {
		min-height: 34rpx;
		line-height: 34rpx;
		font-size: 24rpx;
		padding-right: 32rpx;
		margin-top: 4rpx;
	}

	.d_eTip,
	.d_eIts .d_eiTip {
		color: #939393;
		font-size: 20rpx;
		padding-left: 16rpx;
		display: inline-block;
	}

	// 他人回复
	.d_eiItem {
		margin-top: 16rpx;
	}

	.d_eiCont {
		overflow: hidden;
	}

	.d_eiReply {
		color: #939393;
		font-size: 20rpx;
		padding: 0 4rpx;
	}
}

// 评论框=====
.d_talk {
	.d_tShim {
		height: 130rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.d_tBox {
		// width: 100vw;
		width: 100%;
		height: 130rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 101;
		box-shadow: 0 0 12rpx 0 rgba(155, 155, 155, 0.16);
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 70rpx;
		.Btn {
			height: 80rpx;
			background: linear-gradient(216deg, rgba(195, 171, 124, 0.94), rgba(227, 210, 175, 0.94));
			border-radius: 40rpx;
			flex: 1;
			font-size: 32rpx;
			font-weight: 500;
			color: #402200;
			text-align: center;
			line-height: 80rpx;
		}
	}
}
.cu-modal {
	position: fixed;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	display: none;
	width: 100%;
	z-index: 500;
}

.show {
	display: block;
}

.bottom-md {
	position: absolute;
	bottom: 0;
	background: #fff;
}

.share {
	position: fixed;
	color: #ffffff;
	right: 0;
	bottom: 190rpx;
	background: linear-gradient(to bottom right, #fe726b, #fe956b);
	padding: 10rpx 10rpx 10rpx 20rpx;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	box-shadow: 0 0 20upx rgba(0, 0, 0, 0.09);
}

.cancel {
	width: 100vw;
	padding: 30rpx;
	text-align: center;
	background: #ffffff;
	color: #888;
	font-weight: normal;
	font-size: 30rpx;
}

.md-content {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 50rpx 0;
}

.md-content-item {
	margin: 0 90rpx;
	position: relative;
}

.md-content-item image {
	width: 100rpx;
	height: 100rpx;
	margin: auto;
}

.md-content-item view {
	margin-top: 15rpx;
	font-size: 28rpx;
}

.sharebtn {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
}

.md-content-item .s_bIcon {
	font-size: 72rpx;
}

.s_bIcon {
	width: 112rpx;
	height: 112rpx;
	color: #fff;
	font-size: 140rpx;
	margin: 60rpx auto 0;
	border-radius: 50%;
	background: #8bc37a;
	box-shadow: 0 0 12rpx rgba(0, 0, 0, 0.16);
	display: flex;
	justify-content: center;
	align-items: center;
}

.s_bIcons {
	background: #ffd425;
}

.i_tBtn {
	width: 102rpx;
	height: 102rpx;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid #fff;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999;
}

.i_tbImg {
	width: 42rpx;
	height: 42rpx;
	margin: 20rpx auto 0;
}

.i_tbTxt {
	width: 100%;
	height: 34rpx;
	line-height: 34rpx;
	text-align: center;
	color: #fff;
	font-size: 24rpx;
	position: absolute;
	top: 58rpx;
	left: 0;
}
</style>
